<template>
	<view >
		<view class="set-box">
			<u-form ref="uForm" :error-type="errorType" label-position="top">
				<u-form-item label="分享客户:"  label-width="180">
					<view class="input_block" style="background-color: rgb(245, 247, 250)">
						<view class="value_block" >
							<block v-if="leave_user_list.length > 0">
								<u-tag v-for="(item,index) in leave_user_list" :key="index"  :text="item.nickname" mode="light" type="info" color="#000" />
							</block>
							<view v-else class="text">选择员工</view>
						</view>
						<view class="u-input__right-icon u-flex">
							<view class="u-input__right-icon--select u-input__right-icon__item" :class="{
								'u-input__right-icon--select--reverse': leaveShow
							}">
								<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="分享给同事:"  label-width="180" >
					<view class="input_block" @click="onSelectClick">
						<view class="value_block" >
							<block v-if="owner_user_list.length > 0">
								<u-tag v-for="(item,index) in owner_user_list" :key="index"  :text="item.nickname" closeable mode="light" type="info" color="#000"  @close="tagDelete(index)"/>
							</block>
							<view v-else class="text">请选择</view>
						</view>
						<view class="u-input__right-icon u-flex">
							<view class="u-input__right-icon--select u-input__right-icon__item" :class="{
								'u-input__right-icon--select--reverse': adminShow
							}">
								<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
							</view>
						</view>
					</view>
				</u-form-item>
			</u-form>
			<view class="u-m-t-80" style="text-align: center;">
				<view class="u-m-b-25">
					<u-button type="success"  @click="onSubmit" :custom-style="{backgroundColor: vuex_theme.color, color: vuex_theme.bgColor}" :ripple="true">确定</u-button>
				</view>
				<u-button type="default" v-if="customer.rw_user_id != '' "  @click="onDel"  :ripple="true">删除分享</u-button>
			</view>
		</view>
		<!-- 选择分享人弹窗 -->
		<u-popup class="popup-content" mode="bottom" border-radius="38"  v-model="adminShow" >
			<view class="popup-title u-border-bottom">
				<view class=""  style="width: 45px;">
					<!-- <u-icon name="close"  color="#909399" size="30"></u-icon> -->
				</view>
				<text class="">选择员工</text> 
				<view class="" @click="adminShow = false" style="width: 45px;">
					<u-icon name="close"  color="#909399" size="30"></u-icon>
				</view>
			</view>
			<u-search margin="30rpx 20rpx" shape="square" v-model="adminkeyword" :show-action="false" :clearabled="true"  placeholder="输入员工名称搜索" @change="adminSearch"></u-search>
			<scroll-view scroll-y style="height: 760rpx;width: 100%;" @scrolltolower="adminBottom">
				<view class="list">
					<block v-if="adminList.length > 0">
						<view class="u-m-b-45">
							<view class="item u-flex u-border-bottom" v-for="(item,index) in adminList" :key="index" @click="onAdmin(item,index)">
								<view class="title" :class="{active: owner_user_list.some(ele => ele.id === item.id) }">{{item.nickname}}</view>
							</view>
						</view>
						<u-loadmore :status="adminStatus" ></u-loadmore>
					</block>
					<u-empty text="暂无数据" v-else  margin-top="100" mode="list"></u-empty>
				</view>
			</scroll-view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				owner_user_list: [],
				leave_user_list: [],
				selectedlist: [],
				adminShow: false,
				leaveShow: false,
				adminList: [],
				adminkeyword: '',
				selectText: '',
				adminPage: 1,
				pageSize: 20, // 每一页多少条数据
				lastAdmin: false,
				adminStatus: 'loadmore',
				updateleave: true,
				errorType: ['message','toast'],
				customer: {},
				customer_id: {}
			};
		},
		// 只有onReady生命周期才能调用refs操作组件
		onReady() {
			
		},
		onLoad(e) {
			this.customer_id = e.customer_id ? e.customer_id: ''
			this.onSelectpage()
			this.getData()
		},
		methods: {
			// 获取客户详情
			getData() {
				this.$u.api.getCustomer({id: this.customer_id}).then(res => {
					if(res.code == 1 ) {
						this.customer = res.data
						this.leave_user_list.push({
							id: this.customer.id,
							nickname: this.customer.name
						})
						// 是否已有已分享同事， 默认添加上去
						if(this.customer.rw_user_id != ''){
							this.$u.api.getAllAdmin({
								pageNumber:1,
								pageSize: this.pageSize,
								name: this.adminkeyword,
								keyField: 'id',
								showField: 'nickname',
								keyValue: this.customer.rw_user_id,
								"searchField": "nickname"
							}).then(res => {
								if(res.code == 1 ) {
									console.log(res)
									this.owner_user_list = res.data.list
								}
							})
						}
					}
				})
			},
			// 选择
			onSelectClick(){
				this.adminShow = true
			},
			// 获取审批人
			onSelectpage(isNextPage,pages) {
				this.$u.api.getAllAdmin({
					pageNumber: (pages || 1 ),
					pageSize: this.pageSize,
					name: this.adminkeyword,
					keyField: 'id',
					showField: 'nickname',
					"q_word": this.adminkeyword,
					"searchField": "nickname"
				}).then(res => {
					if(res.code == 1 ) {
						// 最后一页
						if(res.data.list.length == 0) {
							this.lastAdmin = true
						} 
						//不够一页
						if (res.data.list.length < this.pageSize) {
							this.adminStatus = 'nomore'
						}
						// 第二页开始
						if(isNextPage) {
							this.adminList = this.adminList.concat(res.data.list)
							return 
						}
						this.adminList = res.data.list
					}
				})
			},
			// 滚动到底部加载更多
			adminBottom() {
				if(this.lastAdmin || this.adminStatus == 'loading') return ;
				this.adminStatus = 'loading'
				setTimeout(() => {
					if(this.lastAdmin) return ;
					this.onSelectpage(true,++this.adminPage)
					if(this.adminList.length >= 10) this.adminStatus = 'loadmore';
					else this.adminStatus = 'loading';
				}, 1200)
			},
			// 选择搜索
			adminSearch() {
				this.adminPage = 1
				this.lastAdmin = false
				this.onSelectpage()
			},
			tagDelete(e) {
				// 移除
				this.owner_user_list.splice(e,1)
			},
			// 选择员工
			onAdmin(item,index){
				let someResult = this.selectedlist.some(function(i) {
					return i.id == item.id
				});
				// 已选退出
				if(someResult) return
				this.owner_user_list.push(item)
			},
			// 开始提交
			onSubmit(){
				if(this.owner_user_list.length == 0){
					// 提示
					uni.showToast({
						title: '请选择分享员工',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let owner_user_id = this.owner_user_list.map((item,index)=>{
					return item['id']
				})
				// 数据验证
				let obj = {
					ids: this.customer_id,
					admin_id: owner_user_id.join(','),
				}
				console.log(obj)
				this.$u.api.onShareCustomer(obj).then((res) => {
					console.log(res)
					if(res.code == 1){
						// 提示
						this.$refs.uToast.show({
							title: res.msg,
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				})
			},
			onDel(){
				uni.showModal({
					title: '提示',
					content: '确定删除全部分享吗？',
					success: function (res) {
						if (res.confirm) {
							this.$u.api.onSdel({
								ids: this.customer_id
							}).then(res => {
								if(res.code == 1 ) {
									// 提示
									uni.showToast({
										title: '操作成功',
										icon: 'success',
										duration: 2000
									})
									this.owner_user_list = []
									this.customer.rw_user_id = ''
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
			},
		},
	}
</script>

<style lang="scss">
.set-box {
    padding: 0rpx 22rpx;
    margin-bottom: 80rpx;
}
.input_block {
	padding: 0 10px;
	border-color: #dcdfe6;
	text-align: left;
	border-radius: 6rpx;
	border: 1px solid #dcdfe6;
	position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
	min-height: 45px;
	align-items: center;
	.value_block {
		flex: 1;
		/deep/ .u-tag {
			margin-right: 20rpx; 
		}
		.text {
			font-size: 28rpx;
			color: #c0c4cc
		}
	}
}
.popup-content {
	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
		height: 50px;
		padding-right: 25rpx;
	}
	.list {
		padding-bottom: 45rpx;
		.item {
			padding: 0 25rpx;
			justify-content: space-between;
			height: 55px;
			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 600;
			}
		}
	}
	.bottom_btn {
		text-align: right;
		padding: 28rpx 10rpx 45rpx;
	}
}
.u-input__right-icon--select {
	transition: -webkit-transform .4s;
	transition: transform .4s;
	transition: transform .4s, -webkit-transform .4s;
}
.u-input__right-icon--select--reverse{
    /* -webkit-transform: rotate(-180deg); */
    transform: rotate(-180deg);
}
.u-input__right-icon__item{
  margin-left: 10rpx;
}
.active {
	color: #cccccc;
}
/deep/ .uicon-close {
	font-size: 18px !important;
}
/deep/ .u-tag {
	display: inline-flex !important;
	align-items: center !important;
}
</style>
